<!--
  作者：xhr
  时间：2022年08月19日 13:25:07
-->
<template>
    <div class="wai" style="width: 100%; height: 100vh;  overflow: hidden">
        <div style="width: 400px; margin: 150px auto">
            <div style="
font-size: 30px;
                      color: rgb(64,158,255);
                      text-align: center;
                      margin: 30px 0;
                    ">
                校园树洞后台管理系统
            </div>
            <el-form size="normal" :rules="rules" :model="form" ref="form">
                <el-form-item prop="username">
                    <el-input prefix-icon="el-icon-user-solid" v-model="form.username"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input prefix-icon="el-icon-lock" v-model="form.password" show-password></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button v-model="form.username" type="primary" style="width: 100%" @click="login">登录</el-button>
                </el-form-item>
                <el-form-item>
                    <!-- <el-button v-model="form.username" type='primary' >注册</el-button> -->
                    <el-button type="primary" style="width:100%" @click="$router.push('/register')">注册</el-button>

                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
import request from '@/utils/request';
export default {
    name: "Login",
    data() {
        return {
            form: {}
            ,
            rules: {
                username: [
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                    // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },

                ],
            }
        };
    },
    computed: {},
    watch: {},
    created() { },
    mounted() { sessionStorage.removeItem("user") },
    methods: {
        login() {
            this.$refs['form'].validate((valid) => {
                if (valid) {
                    request.post("/user/login", this.form).then(res => {
                        if (res.code === "0") {
                            if (res.data.role == 3) {
                                this.$message({
                                    type: "error",
                                    message: "学生身份不可登录",
                                });
                            } else {
                                this.$message({
                                    type: "success",
                                    message: "登录成功",
                                });
                                sessionStorage.setItem("user", JSON.stringify(res.data))
                                this.$router.push("/")
                            }
                        } else {
                            this.$message({
                                type: "error",
                                message: res.msg,
                            });
                        }
                    })
                }
            })

        },
    },
};
</script>

<style scoped>
.wai {
    background: url(@/assets/2244.jpg) no-repeat;
    background-size: 100% 100%;
}
</style>
